JavaScript基础之ES6对象解构赋值

对象解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。
--- 阮一峰《ECMAScript 6 入门》

具体的对象解构赋值的规则可以参考 对象的解构赋值, 说的很详细。

作为一个前端程序员，对于ES6这个新的语法表达式，肯定是需要熟练使用的，下面是我个人的一些理解。给大家分享一下。

在ES6没有出现以前，我们是这样把对象中的值赋给变量的。

// 第一版
var obj = {name: '小明', age: 12, sex: '男'};
var name = obj.name;
var age = obj.age;
var sex = obj.sex;
var phone = obj.phone // phone => undefined

然后有人说这里，var被使用多次, 不好。 于是修改为下面这样?

// 第二版
var obj = {name: '小明', age: 12, sex: '男'};
var name = obj.name,
    age = obj.age,
    sex = obj.sex,
    phone = obj.phone;

有人说，obj这个对象被多次调用，不好...... 于是ES6来了。被修改为下面这样?

// 第三版
let obj = {name: '小明', age: 12, sex: '男'};
let {name, age, sex, phone} = obj

暂时没有人说不好了。

当我们想把对象中的属性值赋给变量的时候。一般需要考虑两个因素。分别是属性值、变量。而属性是通过属性名决定的，变量是通过变量名决定的。所以，最后决定因素就是属性名，变量名。当我们能够确定属性名和变量名的时候，它们对应的属性值和变量值之间的赋值关系也就确定了。

所以在ES6的解构赋值中，大致可以分为两种情形。属性名与被赋值的变量名一致与不一致

1. 属性名与变量名不一致

当属性名称与变量名称不一致的，需要显式的指定属性名。这样才能把属性值给赋值到变量中。
例如:

let user = {name: '小明', age: 12};
let {name: userName, age: userAge} = user;
console.log(userName); // '小明'
console.log(userAge);  // 12  

2. 属性名与变量名一致

当属性名称与变量名称一致的，就只需要显示的指定变量名。

let user = {name: '小明', age: 12};
let {name, age} = user;
console.log(name);
console.log(age);

这里的语法结构跟前面也不一样，把变量名和属性名合并在一起。

当然了，上面是常见的赋值情况，还有一些其他条件下也是需要考虑的。

其他关注点

1. 属性不存在，但是依然赋给变量

当要给变量赋值的属性不存在，会给变量提供一个默认值undefined

let user = {name: '小明', age: 12};
let { address: userAddress} = user;
console.log(userAddress);  //userAddress的就是undefined

2. 变量赋予默认值

当要给变量赋值的属性不存在的时候，变量是能够被赋予默认值

// 属性不存在
let user = {name: '小明', age: 12};
let {address: userAddress = '上海'} = user;
console.log(userAddress); // 由于user中不存在address属性，所以userAddress的值是默认值 `上海`

// 属性存在
let user = {name: '小明', age: 12};
let {name: userName = '小天'} = user;
console.log(userName); // userName => '小明'
// 因为属性存在，变量无法获取默认值

3. 同一个属性赋给多个变量

对象中的一个属性值是可以同时赋予给多个变量。

let user = {name: '小明', age: 12};
let { name: userName, name: user1Name} = user; 
console.log(userName); // '小明'
console.log(user1Name); // '小明'

4. 嵌套赋值

解构赋值是可以嵌套，而且是从对象最外层开始查找

let user = {name: '小明', age: 12, course: {name: '数学', score: 90}};
let {course} = user;
console.log(course);  // {name: "数学", score: 90}

let {course: { score }} = user
console.log(score) // 90

5. let 是否必要

前面的例子中，都是是let {xxx} = {xxx} 的形式。于是就会觉得使用解构赋值就一定需要使用let、const、var。 其实不是的。let {xxx} = {xxx} 这只是其中的一种方, 声明完变量后就对其进行赋值。 解构赋值是对变量的赋值，只要是变量都是可以进行赋值的。
例如:

let name;
let user = {name: '小明', age: 12};
{name} = user;
// Uncaught SyntaxError: Unexpected token =
// 程序报错了，还是需要使用let ?。 
// 这里程序报的错误是SyntaxError(语法错误)，在程序预编译的时候发生的。具体的分析暂时不讨论

解决的方式很简单，把上面的代码块变成一段表达式就OK

let name;
let user = {name: '小明', age: 12};
({name} = user); 
console.log(name)

总结

解构赋值是ES6提供一个十分方便的表达式。 在开始的时候，上面那么多的规则，很难记住。于是为了理解。我把ES6代码转变成下面这种方式，于是很快就明白了。

// ES6 的解构赋值
let user = {name: '小明', age: 12};
let {name: userName} = user;

// ES5 的对象赋值
let userName; (这里可以被赋予初始值)
let user = {name: '小明', age: 12};
if (user.name !== undefined) {   // 对象的属性不存在
    userName =  user.name  // user.name 能够赋值给多个变量